<template>
	<view class="entrepreneur-content">
		<view class="condition-block">
			<!-- <view class="condition-item">
				<picker @change="bindOrder" class="picker" :range="order" range-key="value">{{order[orderIndex].value}}</picker>
				<view class="iconfont icon-below-s"></view>
			</view> -->
			<view class="condition-item">
				<picker @change="bindType" class="picker" :range="type" range-key="value">{{type[typeIndex].value}}</picker>
				<view class="iconfont icon-below-s"></view>
			</view>
		</view>
		<view class="list-block">
			<block v-if="list.length>0">
				<navigator v-for="(item,index) in list" hover-class="none" :key="item.id" :url="'/pages/entrepreneurship/detail?id='+item.id" class="list-item" v-if="item.files[0]">
				<view class="cover-block">
					<image :src="item.files[0].url" mode="aspectFill" class="list-cover"></image>
				</view>
				<view class="info-block">
					<view class="name">{{item.name}}</view>
					<view class="position-block">
						<view class="iconfont icon-dingwei"></view>
						<view class="position">{{item.addr_name}}</view>
					</view>
					<view class="label-block">
						<view v-for="(item1,index1) in item.type" class="label-item">{{item1}}</view>
					</view>
				</view>
				</navigator>
			</block>
			<view v-else class="empty">暂无数据</view>
			
		</view>
	</view>
</template>

<script>
	import {getType} from '@/api/comprehensive.js';
	import {getList} from '@/api/entrepreneurship.js';
	export default{
		data(){
			return{
				order:[
					{id:1,value:'默认排序'},
					{id:2,value:'评分最高'},
				],
				orderIndex:0,
				type:[
				],
				typeIndex:0,
				list:[
				],
			}
		},
		methods:{
			bindOrder(e){
				this.orderIndex=e.detail.value;
				this.getListData();
			},
			bindType(e){
				this.typeIndex=e.detail.value;
				this.getListData();
			},
			getTypeData(){
				uni.showLoading({
					title:'加载中',
					mask:true
				})
				getType({type:4}).then((res)=>{
					uni.hideLoading();
					if(res.status==1){
						this.type=res.data;
						this.getListData();
					}else{
						this.utils.showToast(res.message,()=>{
							uni.navigateBack()
						})
					}
				}).catch((res)=>{
					uni.hideLoading()
					this.utils.showToast('加载失败，请重试')
				})
			},
			getListData(){
				uni.showLoading({
					title:'加载中',
					mask:true
				})
				getList({pageNum:1,pageSize:1000,type:this.type[this.typeIndex].id}).then((res)=>{
					uni.hideLoading();
					if(res.status==1){
						this.list=res.data;
					}else{
						this.utils.showToast(res.message,()=>{
							uni.navigateBack()
						})
					}
				}).catch((res)=>{
					uni.hideLoading()
					this.utils.showToast('加载失败，请重试')
				})
			}
		},
		onLoad() {
			this.getTypeData();
		}
	}
</script>

<style lang="scss" scoped>
	.entrepreneur-content{
		display: flex;
		width: 100%;
		flex-direction: column;
		padding: 30rpx;
		.condition-block{
			display: flex;
			flex-direction: row;
			margin-bottom: 30rpx;
			.condition-item{
				display: flex;
				flex-direction: row;
				align-items: center;
				height: 40rpx;
				margin-right: 60rpx;
				.picker{
					height: 100%;
					margin-right: 20rpx;
					font-weight: bold;
					font-size: 30rpx;
				}
				.iconfont{
					font-size: 24rpx;
				}
			}
		}
		.list-block{
			width: 100%;
			display: flex;
			flex-direction: column;
			.list-item{
				width: 100%;
				display: flex;
				flex-direction: row;
				margin-bottom: 20rpx;
				.cover-block{
					position: relative;
					width: 210rpx;
					height: 210rpx;
					margin-right: 20rpx;
					.list-cover{
						width:100%;
						height: 100%;
						border-radius: 18rpx;
					}
				}
				.info-block{
					display: flex;
					flex-direction: column;
					width: calc(100% - 230rpx);
					.name{
						font-size: 36rpx;
						font-weight: bold;
						margin-right: 30rpx;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 3;
						overflow: hidden;
					}
					.position-block{
						margin-top: 10rpx;
						display: flex;
						align-items: center;
						.iconfont{
							flex-grow: 0;
							color: #999;
							font-size: 28rpx;
						}
						.position{
							color: #999;
							font-size: 28rpx;
							flex-grow: 1;
						}
					}
					.label-block{
						display: flex;
						flex-direction: row;
						flex-wrap: wrap;
						margin-top: 20rpx;
						.label-item{
							background: #DDFDFE;
							color: $uni-color-primary;
							font-size: 24rpx;
							padding: 5rpx 10rpx;
							margin-bottom: 16rpx;
							margin-right: 16rpx;
							border-radius: 12rpx;
						}
					}
				}
			}
		}
	}
</style>